<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>
		
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

	   
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-export.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/tableExport.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/FileSaver/FileSaver.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/jsPDF/jspdf.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/jsPDF-AutoTable/jspdf.plugin.autotable.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/js-xlsx/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>

	<body>
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputId1">订单编号：</label>
				<input type="text" class="form-control" id="order_id" name="order_id" placeholder="请输入编号">
			</div>
			
			<div class="form-group">
				<label for="exampleInputName1">顾客账号：</label>
				<input type="text" class="form-control" id="custom_user_id" name="custom_user_id" placeholder="请输入账号">
			</div>
			
            
			<div class="form-group">
				<label for="exampleInputName1">顾客姓名：</label>
				<input type="text" class="form-control" id="username" name="username" placeholder="请输入顾客姓名">
			</div>
			
			
				<div class="form-group">
				<label for="exampleInputName2">订单状态：</label>
                <select class="form-control"  style = "width:189px;" id="order_status" name="order_status">
					<option value="0">-- --</option>
					<option value="1">已预约</option>
					<option value="2">服务中</option>
				    <option value="3">待支付</option>
					<option value="4">已支付</option>
					<option value="5">已完成</option>
					<option value="6">已过期</option>
					<option value="7">已撤销</option>
					<option value="8">待查询</option>
				<select>
			</div>
		
	<div class="form-group">
				<label for="exampleInputName1">消费内容：</label>
				<input type="text" class="form-control" id="order_content" name="order_content" placeholder="请输入顾客姓名">
			</div>
			
				<div class="form-group">
				<label for="exampleInputName2">支付方式：</label>
                <select class="form-control"  style = "width:189px;" id="pay_way" name="pay_way">
					<option value="0">-- --</option>
					<option value="1">微信</option>
					<option value="2">支付宝</option>
					<option value="3">美颜币</option>
					<option value="4">礼包项目</option>
				<select>
			</div>
			
			<div class="form-group">
				<label for="exampleInputName1">服务员工：</label>
				<input type="text" class="form-control" id="server_user_id" name="server_user_id" placeholder="请输入姓名">
			</div>
			
			<div class="form-group">
				<label for="exampleInputName1">操作员工：</label>
				<input type="text" class="form-control" id="handle_user_id" name="handle_user_id" placeholder="请输入顾客姓名">
			</div>
			
		
				 
			
			<div class="form-group">
				<label for="exampleInputName2">店铺名称：</label>
                <select class="form-control"  style = "width:189px;" id="shop_name" name="shop_name">
					<option value="0">-- --</option>
					<option value="1">津滨腾越店</option>
				<select>
			</div>
			
			<div class="form-group">
				<label for="exampleInputName2">订单来源：</label>
                <select class="form-control"  style = "width:189px;" id="order_source" name="order_source">
					<option value="0">-- --</option>
					<option value="1">平台</option>
					<option value="2">商家</option>
				<select>
			</div>
			
			<div class="form-group">
				<label for="exampleInputName1">完成日期：</label>
				<input type="date" class="form-control" id="finish_timestart" name="finish_timestart" placeholder="">
				<label for="exampleInputName1">至</label>
			<input type="date" class="form-control" id="finish_timeend" name="finish_timeend" placeholder="">

			</div>
			   
			     <button type="button" class="btn btn-primary "id="btns2" >查询</button>
                 <button type="reset" class="btn btn-info" id="resetBtn">重置</button>
			   
			</form>
		
		<div>
		<table id="table">
         
		</table>
		</div>
		
		<script >
			
			  function changeDateFormat(cellval) {
    var dateVal = cellval + "";
    if (cellval != null) {
        var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
    }
}
			
			
			$(function() {

				//1.初始化Table

				var oTable = new TableInit();

				oTable.Init();
				
			});
			 //根据ID查看详情
             function findByBagId(order_id){
                	$.ajax({
                		type:"post",
                		url:"/bbo/findByBagId/"+order_id,
                		success:function(data){
                			//alert(changeDateFormat(data.pay_time))
                			$("#shop_id1").html(data.shop_id);
                			$("#shop_name1").html(data.shop_name);
                			if(data.shop_name==1){
                				$("#shop_name1").html("津滨腾越店");
                			}
                			$("#order_id1").html(data.order_id);
                			$("#order_status1").html(data.order_status);
                			if(data.order_status==1){
                				$("#order_status1").html("已预约");
                			}else if(data.order_status==2){
                				$("#order_status1").html("服务中");
                			}else if(data.order_status==3){
                				$("#order_status1").html("待支付");
                			}else if(data.order_status==4){
                				$("#order_status1").html("已支付");
                			}else if(data.order_status==5){
                				$("#order_status1").html("已完成");
                			}else if(data.order_status==6){
                				$("#order_status1").html("已过期");
                			}else if(data.order_status==7){
                				$("#order_status1").html("已撤销");
                			}else if(data.order_status==8){
                				$("#order_status1").html("待查询");
                			}
                			$("#username1").html(data.username);
                			$("#custom_user_id1").html(data.custom_user_id);
                			$("#subscribe_time1").html(changeDateFormat(data.subscribe_time));
                			$("#deposit_money1").html(data.order_money);
                			$("#pay_way1").html(data.pay_way);
                			if(data.pay_way==1){
                				$("#pay_way1").html("微信");
                			}else if(data.pay_way==2){
                				$("#pay_way1").html("支付宝");
                			}else if(data.pay_way==3){
                				$("#pay_way1").html("美颜币");
                			}else if(data.pay_way==4){
                				$("#pay_way1").html("礼包项目");
                			}
                			$("#pay_time1").html(changeDateFormat(data.pay_time));
                			$("#project_name1").html(data.project_name);
                			$("#pay_money1").html(data.pay_money);
                		 
                		}
                	});
                }

			var TableInit = function() {
				var oTableInit = new Object();
				//初始化Table
				oTableInit.Init = function() {

					$('#table').bootstrapTable({

						method: 'get',

						contentType: "application/x-www-form-urlencoded",

						url: "/bbo/list", //请求后台的URL（*）

						striped: true, //是否显示行间隔色

						locale: 'zh-CN', //中文支持

						pagination: true, //是否开启分页（*）

						pageNumber: 1, //初始化加载第一页，默认第一页

						pageSize: 5, //每页的记录行数（*）

						pageList: [3, 5, 7], //可供选择的每页的行数（*）

						sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

						showRefresh: true, //刷新按钮

						queryParams: oTableInit.queryParams, //传递参数（*）

						strictSearch: true,

						showColumns: true, //是否显示所有的列

						showRefresh: true, //是否显示刷新按钮

						minimumCountColumns: 2, //最少允许的列数

						clickToSelect: true, //是否启用点击选中行
						
						showExport: true,                    
        				exportDataType: 'all',
        				exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
						

						uniqueId: "order_id", //每一行的唯一标识，一般为主键列

						columns: [{
							field: 'order_id',
							title: '订单编号',
							align: 'center',
						}, {
							field: 'custom_user_id',
							title: '顾客编号',
							align: 'center',
						}, {
							field: 'username',
							title: '顾客姓名',
							align: 'center',
						}, {
							field: 'order_content',
							title: '消费内容',
							align: 'center',
						}, {
							field: 'order_money',
							title: '价格(元)',
							align: 'center',
						}, {
							field: 'pay_way',
							title: '支付方式',
							align: 'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "微信";
										break;
									case 2:
										return "支付宝";
										break;
									case 3:
										return "美颜币";
										break;
									case 4:
										return "礼包项目";
										break;
								}
							}
						}, {
							field: 'pay_money',
							title: '支付金额(元)',
							align: 'center',
						}, {
							field: 'extend_beauty_num',
							title: '消耗颜值',
							align: 'center',
						}, {
							field: 'shop_id',
							title: '店铺编号',
							align: 'center',
						}, {
							field: 'project_name',
							title: '项目名称',
							align: 'center',
						}, {
							field: 'bisShop.shop_name',
							title: '店铺名称',
							align: 'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "津滨腾越店";
										break;
								}
							}
						}, {
							field: 'server_user_id',
							title: '服务员工',
							align: 'center',
						},{
							field:'handle_user_id',
							title:'最后操作员',
							align:'center',
						},{
							field:'pay_time',
							title:'支付时间',
							align:'center',
					        sortable: true,
                //——修改——获取日期列的值进行转换
                            formatter: function (value, row, index) {
                            return changeDateFormat(value)
                }

						},{
							field:'finish_time',
							title:'完成时间',
							align:'center',
							  sortable: true,
                //——修改——获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }

						},{
							field:'order_status',
							title:'状态',
							align:'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "已预约";
										break;
									case 2:
										return "服务中";
										break;
									case 3:
										return "待支付";
										break;
									case 4:
										return "已支付";
										break;
									case 5:
										return "已完成";
										break;
									case 6:
										return "已过期";
										break;
									case 7:
										return "已撤销";
										break;
									case 8:
										return "待查询";
										break;
								}
							}
							
						},{
							field:'order_source',
							title:'订单来源',
							align:'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "平台";
										break;
									case 2:
										return "商家";
										break;
								}
							}
							
						},{
							title:'操作',
							align:'center',
							formatter:function(value,row,index){
								return '<button data-toggle="modal" data-target="#myModal4" id="opModal" onclick="findByBagId(\''+
						        	row.order_id+'\')" class="btn btn-danger">查看詳情</button>'

							}
						}
						
						
						]

					});

				};
				  //修改——转换日期格式(时间戳转换为datetime格式)
    
               
                
                
				//得到查询的参数

				oTableInit.queryParams = function(params) {
				//alert($("#pay_way").val()+"====")
					var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

						offset: params.offset, //页面大小

						pageSize: params.limit, //偏移量
						
						

						order_id: $("#order_id").val(),
						 
						custom_user_id:$("#custom_user_id").val(),
						
						username:$("#username").val(),
						
						order_content:$("#order_content").val(),
						
						server_user_id:$("#server_user_id").val(),
						
						handle_user_id:$("#handle_user_id").val(),
						
						order_status:$("#order_status").val(),
						
						pay_way:$("#pay_way").val(),
						
						finish_timestart:$("#finish_timestart").val(),
						
						finish_timeend:$("#finish_timeend").val(),
						
						shop_name:$("#shop_name").val(),
						
						order_source:$("#order_source").val()
  
					};
					return temp;
				};
				return oTableInit;
			};
			
			//查询
			$('#btns2').click(function() {
				$('#table').bootstrapTable('refresh');
			})
			
		</script>
      
          <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal4" tabindex="2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content" style="width: 600px;height: 500px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel4">查看详情</h4>
            </div>
          
            	<table border="1" width="90%" height="85%" align="center" style="text-align: center;">
            		<tr>
            			<td>
            				<span class="h-cont hand-right">店铺信息</span>
            			</td>
            			<td>
            				<span class="h-cont hand-left">店铺编号:</span>
            			</td>
            			<td>
            				<span class="h-cont h-left" id="shop_id1"></span>
            			</td>
            			<td><span class="h-cont h-right">店铺名称:</span></td>
            			<td>
            				<span class="h-cont h-left" id="shop_name1"></span>
            			</td>
            		</tr>
            		<tr>
            			<td rowspan="5">订单信息</td>
            			<td>
            				<span class="h-cont h-right">订单编号:</span>
            			</td>
            			<td>
            				<span class="h-cont h-left" id="order_id1"></span>
            			</td>
            			<td>
            				<span class="h-cont h-right">订单状态:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="order_status1"></span>
            			</td>
            		</tr>
            		<tr>
            			
            			<td>
            				<span class="h-cont h-right">顾客姓名:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="username1"></span>
            			</td>
            			<td>
            				<span class="h-cont h-right">顾客账号:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="custom_user_id1"></span>
            			</td>
            		</tr>
            		<tr>
            			
            			<td>
            				<span class="h-cont h-right">预约时间:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="subscribe_time1"></span>
            			</td>
            			<td>
            				<span class="h-cont h-right">预交定金:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="deposit_money1"></span>
            			</td>
            		</tr>
            		
            		<tr>
            			<td>
            				<span class="h-cont h-right">实付金额:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="pay_money1"></span>
            			</td>
            			<td>
            				<span class="h-cont h-right">支付方式:</span>	
            			</td>
            			<td>
            				<span class="h-cont h-left" id="pay_way1"></span>
            			</td>
            		</tr>
            		<tr>
            		    <td>
            				<span class="h-cont h-right">支付时间:</span>	
            		    </td>
            			<td colspan="4">
            					<span class="h-cont h-left" id="pay_time1"></span>
            			</td>
            		</tr>
            		
            	
            		
            		
            	</table>
          
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
	</body>

</html>